<template>
  <!-- 直播日历页面 -->
  <div class="calendar-container">
    <!-- 筛选年月 -->
    <div class="select">
      <div class="live-status">
        <div class="on-live">
          <div class="purple"></div>
          <span>开播</span>
        </div>
        <div class="no-live">
          <div class="gray"></div>
          <span>未开播</span>
        </div>
      </div>
      <!-- 年份选择 -->
      <el-date-picker v-model="yearValue" type="year" style="width: 225px" />
      <!-- 月份选择 -->
      <el-select
        v-model="monthValue"
        style="width: 114px; border-radius: 4px"
        @change="
          (value: any) => {
            console.log('value:', value);
          }
        "
      >
        <el-option
          v-for="item in month"
          :key="item.value"
          :label="`${item.label}月`"
          :value="String(item.value)"
        />
      </el-select>
    </div>
    <el-calendar ref="calendar">
      <!-- 自定义表头 -->
      <template #header>
        <div class="custom-header"></div>
      </template>

      <!-- 自定义日期单元格 -->
      <template #date-cell="{ data }">
        <div class="cell-content" :class="getCellBg(data.day)">
          <div class="day">{{ data.day.split("-")[2] }}</div>
          <div
            class="status"
            :class="{
              'live-text': list.find((i) => i.day === Number(data.day.split('-')[2]))?.time,
              'no-live-text': !list.find((i) => i.day === Number(data.day.split('-')[2]))?.time,
            }"
          >
            {{
              getStatusText(list.find((item) => item.day == Number(data.day.split("-")[2]))?.time)
            }}
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>
<script lang="ts">
export default {
  name: "LiveCalendar",
};
</script>
<script setup lang="ts">
import { ref } from "vue";
//顶部选择器绑定
const yearValue = ref("2025");
const monthValue = ref("1");

//月份选择
const month = [
  {
    value: "1",
    label: "1",
  },
  {
    value: "2",
    label: "2",
  },
  {
    value: "3",
    label: "3",
  },
  {
    value: "4",
    label: "4",
  },
  {
    value: "5",
    label: "5",
  },
  {
    value: "6",
    label: "6",
  },
  {
    value: "7",
    label: "7",
  },
  {
    value: "8",
    label: "8",
  },
  {
    value: "9",
    label: "9",
  },
  {
    value: "10",
    label: "10",
  },
  {
    value: "11",
    label: "11",
  },
  {
    value: "12",
    label: "12",
  },
];
//开播状态渲染
const getStatusText = (time: string | undefined) => {
  return time ? time : "未开播 ";
};

//开播状态选择
const list = [
  {
    day: 1,
    time: "19:00",
  },
  {
    day: 2,
    time: "",
  },
  {
    day: 3,
    time: "19:00",
  },
  {
    day: 4,
    time: "19:00",
  },
  {
    day: 5,
    time: "19:00",
  },
  {
    day: 6,
    time: "",
  },
  {
    day: 15,
    time: "20:00",
  },
  {
    day: 20,
    time: "20:00",
  },
];

// 单元格背景色逻辑
const getCellBg = (day: string) => {
  const dayNum = Number(day.split("-")[2]);
  const hasLive = list.some((item) => item.day === dayNum && item.time);
  return hasLive ? "live-bg" : "no-live-bg";
};
</script>

<style scoped lang="scss">
.calendar-container {
  flex: 1;
  background: linear-gradient(180deg, #f0f5ff 0%, #fbfcfe 100%);
  box-shadow:
    inset 2px 1px 2px 1px #ffffff,
    0px 4px 8px 0px #eaf0ff;
  border-radius: 30px;
  .select {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 25px 7px 0 7px;
    gap: 16px;
    .live-status {
      display: flex;
      align-items: center;
      margin-right: 18px;
      gap: 24px;
      // background-color: lightblue;
      .on-live {
        display: flex;
        align-items: center;
        gap: 8px;
        .purple {
          width: 16px;
          height: 16px;
          background: #c2c2f8;
          border-radius: 4px;
        }
      }
      .no-live {
        display: flex;
        align-items: center;
        gap: 8px;
        .gray {
          width: 16px;
          height: 16px;
          background: #dfdfdf;
          border-radius: 4px;
        }
      }
    }
  }
}
:deep(.el-calendar) {
  background: transparent;
  padding: 25px 38px;

  // 隐藏默认头部边框
  .el-calendar__header {
    border-bottom: none;
    padding-bottom: 0;
    thead th {
      border-bottom: none !important;
    }
  }

  // 表格主体样式
  .el-calendar__body {
    padding: 0;
    background: transparent;
    td {
      border: none !important;
      background: transparent;
      position: relative;
      height: 136px;
    }
  }

  // 单元格容器
  .cell-content {
    height: 100%;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 12px;
    position: relative;
    height: 120px;
    //开播状态背景色
    &.live-bg {
      background: rgba(79, 70, 229, 0.3);
    }
    &.no-live-bg {
      background: #dfdfdf;
    }

    // 日期右上角定位
    .day {
      font-size: 16px;
      color: #000000;
      align-self: flex-end;
      position: absolute;
      top: 8px;
      right: 8px;
    }

    // 状态左下角定位
    .status {
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 4px;
      align-self: flex-start;
      position: absolute;
      bottom: 8px;
      left: 8px;
      &.live-text {
        color: #4f46e5;
      }
      &.no-live-text {
        color: #6b7280;
      }
    }
  }
}
</style>
